import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { NavItemType } from './types/navItemType';
import './BottomNavigation.css'
const navItems: NavItemType[] = [
    { path: '/home', label: '首页' },
    { path: '/products', label: '分类' },
    { path: '/services', label: '购物车' },
    { path: '/contact', label: '我的' }
];

const SubscriptNavigation: React.FC = () => {
    const [activeIndex, setActiveIndex] = useState(0);
    const navigate = useNavigate();
    const handleClick = (index: number, path: string) => {
        setActiveIndex(index);
        navigate(path);
    };

    return (
        <div className='botton-navigation'>
            <ul>
                {navItems.map((item, index) => (
                    <li
                        key={index}
                        style={{
                            cursor: 'pointer',
                            marginTop:"800px",
                            fontWeight: activeIndex === index? 'bold' : 'normal'
                        }}
                        onClick={() => handleClick(index, item.path)}
                    >
                        <Link to={item.path}>{item.label}</Link>
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default SubscriptNavigation;